<template>
    <keep-alive :include="cachedViews">
        <!-- <div :is="currentView"></div> -->
        <div>
            <div class="app-container clearfix pageHeader">
                <div class="header fl">{{$route.meta.title}}</div>
            </div>
            <div class="app-container margin-content padding-content">
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="HS编码">
                        <el-autocomplete class="inline-input" v-model="form.hsCode" :fetch-suggestions="querySearchCode" placeholder="请输入HS编码" :trigger-on-focus="false" @select="handleSelectCode"></el-autocomplete>
    
                    </el-form-item>
                    <el-form-item label="企业名称">
                        <el-autocomplete class="inline-input" v-model="form.originCountry" :fetch-suggestions="querySearchCountry" placeholder="请选择原产国/贸易国" :trigger-on-focus="false" @select="handleSelectCountry"></el-autocomplete>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="doSearch">查询</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="app-container margin-content padding-content">
                <!-- <div class="clearfix inline-wrapper">
                        <div class="fr" style="margin-right:10px;">
                                <el-autocomplete class="inline-input" v-model="originCountry" :fetch-suggestions="querySearchCountry" placeholder="请选择原产国/贸易国" :trigger-on-focus="false" @select="handleSelectCountry"></el-autocomplete>
                        </div>
                        <div class="fr" style="margin-right:10px;">
                            <el-autocomplete class="inline-input" v-model="hsCode" :fetch-suggestions="querySearchCode" placeholder="请输入HS编码" :trigger-on-focus="false" @select="handleSelectCode"></el-autocomplete>
                        </div>
                    </div> -->
                <el-table :height="scrollHeight" :key="tableKey" :data="list" v-loading="listLoading" element-loading-text="正在加载..." style="width: 100%">
                    <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="商品编码" property="goodCode"></el-table-column>
                    <el-table-column label="商品描述" property="goodDesc"></el-table-column>
                    <el-table-column label="原产地/贸易国" property="originCountry"></el-table-column>
                    <el-table-column label="企业名称" property="entName"></el-table-column>
                    <el-table-column label="统一信用代码" property="creditCode"></el-table-column>
                    <el-table-column label="联系人" property="contactPerson"></el-table-column>
                    <el-table-column label="联系电话" property="contactTel"></el-table-column>
                    <el-table-column label="邮箱" property="email"></el-table-column>
                    <el-table-column label="通讯地址" property="addr"></el-table-column>
                </el-table>
                <div class="pagination-container align-right">
                    <el-pagination background :current-page="page.pageNum" v-if="isShow" :page-size="page.pageSize" :total="total" @current-change="handleCurrentChange" layout="total,prev, pager, next, jumper">
                    </el-pagination>
                </div>
            </div>
    
    
        </div>
    </keep-alive>
</template>

<script>
    import {
        getOriginCountryList,
        querySearchList
    } from '@/api/enterpriseTrade'
    export default {
        name: 'enterpriseTrade',
        data() {
            return {
                form: {
                    hsCode: '',
                    originCountry: ''
                },
                options: [],
                scrollHeight: null,
                page: {
                    pageNum: 1,
                    pageSize: 20
                },
                total: 0,
                tableKey: 0,
                listLoading: false,
                list: [],
                isShow: false,
                saveSetTimeoutSearch: null,
            }
        },
        computed: {
            // currentView(){
            //   return this.view[this.index]
            // },
            searchUrl() {
                return process.env.BASE_API + '/auto/autoComplete'
            },
            xtoken() {
                return store.getters.token ? getToken() : ''
            },
            cachedViews() {
                return this.$store.state.tagsView.cachedViews
            }
        },
        methods: {
            tableResize() {
                const _height = 320
                this.scrollHeight = document.body.scrollHeight - _height
                window.onresize = () => {
                    this.scrollHeight = document.body.scrollHeight - _height
                }
            },
            getList() {
                this.listLoading = true
                this.isShow = false
                let params = {
                    hsCode: this.form.hsCode,
                    originCountry: this.form.originCountry,
                    pageNum: this.page.pageNum,
                    pageSize: this.page.pageSize
                }
    
                getOriginCountryList(params).then((res) => {
                    if (res.data.code === 200) {
                        this.isShow = true
                        //   res = res.data
                        this.list = res.data.data.dataList !== '' ? res.data.data.dataList : []
                        this.total = res.data.data.total !== '' ? res.data.data.total : 0
                        this.listLoading = false
                    }
    
                })
            },
            // 页码查询
            handleCurrentChange(val) {
                this.page.pageNum = val
                this.getList()
            },
            doSearch() {
                this.page.pageNum = 1
                this.getList()
            },
            resetForm() {
                this.form = {
                    hsCode: '',
                    originCountry: '',
                }
            },
            querySearchCode(queryString, cb) {
                let params = {
                    type: 'hscode',
                    value: queryString
                }
                querySearchList(params).then((res) => {
                    console.log(res)
                    if (res.data.code === 200) {
                        cb(res.data.data)
                    }
                })
            },
            handleSelectCode(item) {
                this.form.hsCode = item.value
                // this.getList()
            },
            querySearchCountry(queryString, cb) {
                let params = {
                    type: 'country',
                    value: queryString
                }
                querySearchList(params).then((res) => {
                    console.log(res)
                    if (res.data.code === 200) {
                        cb(res.data.data)
                    }
                })
            },
            handleSelectCountry(item) {
                this.form.originCountry = item.value
                // this.getList()
            }
        },
        created() {
            this.tableResize()
            this.getList()
        },
    }
</script>

<style lang="scss">
    @import url('vue2-autocomplete-js/dist/style/vue2-autocomplete.css');
</style>